import React, { useState, useEffect } from 'react';
import './track.scss';
import * as api from 'api/index'

// 足迹
function MyFooter() {

  let [footprint, setcollection] = useState([])
  const postList = () => {

    api.browseList().then((res) => {
      let newList = handleList(res.result)
      setcollection(newList)

      console.log(res);

    })
  }
  useEffect(postList, [])
  //处理数据:按照日期重新整理数组
  const handleList = (list) => {
    let dateList = list.map((item) => item.updateTime);

    //去重
    let set = new Set(dateList)
    // 转数组
    dateList = [...set];
    console.log('dateList', dateList);
    let newList = dateList.map((date) => {
      // 过滤相同日期的成员
      let childrenList = list.filter((item) => item.updateTime === date);
      console.log('childrenList-----list', list);
      console.log('return', date);
      return {
        date,
        childrenList,
      };
    });
    return newList;
  };
  const preback = () => {
    history.back();
  };
  // 删除足迹
  const deletes = (date) => {
    // console.log(date, 888);
    let params = {
      updateTime: date
    }
    api.browseDel(params).then(res => {
      console.log(res);
      postList()

    })

  }
  return (
    <div className='myFooter'>
      <div className='header_ flex bg-fff aic jc-c'>
        <div className='back flex aic' onClick={preback}>
          <img src="" className='f22 iconfont icon-zuojiantou' alt="" />
          <span className='tback' >返回</span>
        </div>
        <p className='f18'>我的足迹</p>
      </div>

      <div className='main'>
        {footprint.map((item, index) => (
          <div className='main-item' key={index}>
            <div className='time bg-fff flex jc-sb aic'>
              <p className='t-time f16'>{item.date}</p>
              <p className='t-t f16' onClick={() => { deletes(item.date) }}>清除</p>
            </div>
            {item.childrenList.map((children) => (
              <div className='items bg-fff' key={children.id}>
                <div className='item flex aic' >
                  <div className='imgbox' >
                    <img
                      className='_img_'
                      src={children.imageUrl}
                      alt="" />
                  </div>
                  <div className='detail ml-20 flex fdc jc-sa'>
                    <p className='t f14'>{children.name}</p>
                    <p className='f14'>
                      <span>¥{children.showMinPrice}</span>
                      <span className='ml-5 f888'>人均:{children.showMinAverage}</span>
                    </p>
                  </div>
                </div>
              </div>
            ))}

          </div>
        ))}


      </div>
      {/* <div className='nomore flex aic jc-c f12 f888'>
        没有更多了
      </div> */}
    </div>
  );
}

export default MyFooter;